<template>
  <el-dialog
      :title="groupName"
      v-model="isShowDialog"
      :lock-scroll="true"
      width="900">
    <div class="content-wrap">
      <div class="search-wrap">
        <div class="keyword-wrap">
          <el-input
              size="large"
              v-model="search.keywords"
              style="width: 100%"
              placeholder="搜索群成员"
              :prefix-icon="Search"
          />
        </div>
        <div class="cate-wrap">
          <div class="cate-item color-primary" v-for="(item,index) in categories" :key="'sk'+index">
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="message-wrap">
        <div v-if="messages.length > 0">
          <div class="message-item">
            sjshdfjh
          </div>
        </div>
        <EmptyData v-else/>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="isShowDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, nextTick} from 'vue';
import {formatDateTimeStyleOne} from "/@/utils/format.ts";
import {Search} from "@element-plus/icons-vue";
import EmptyData from "/@/components/common/emptyData.vue";

export default defineComponent({
  name: 'ChatHistory',
  components: {EmptyData},
  computed: {
    Search() {
      return Search
    }
  },
  methods: {formatDateTimeStyleOne},
  props: {
    groupId: {
      type: String,
      default: () => null,
    },
    groupName: {
      type: String,
      default: () => null
    },
  },
  setup(props) {
    const state = reactive({
      isShowDialog: false,
      categories: [
        {label: '文件', value: 'file'},
        {label: '图片', value: 'image'},
        {label: '链接', value: 'link'},
        {label: '日期', value: 'date'},
      ],
      search: {
        keywords: null,
        cateId: null
      },
      messages: []
    });
    const openDialog = () => {
      nextTick(() => {
        state.isShowDialog = true;
      })
    };
    return {
      ...toRefs(state),
      openDialog
    };
  },
});
</script>


<style scoped lang="scss">
.content-wrap {

  .search-wrap {
    margin-bottom: 10px;
    border-bottom: 1px solid #EFEFEF;

    .cate-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 0;

      .cate-item {
        padding: 0 10px;
        cursor: pointer;
      }
    }
  }


  .message-wrap {
    height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
